
/* ------------------------------------------------------------------------
スライドイン・スライドショー

【使用方法】（なるべく<head>タグ内にて）
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/ss_slidein.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var slideObj;
Event.observe(window,'load',function() {
	var option = {imageId:"container", interval:3, duration:0.7};
	var slideObj = new Slidein("imagelist.xml",option); 
});
</script>

【パラメータの説明】
第1パラメータはXMLの場所を指定します（JSO(N)指定も可）
第2パラメータは以下の情報を任意に指定します（上記書式を参考に）
	imageId: スライドショーを表示するブロックのID
	effect: 画像表示種類　0:ランダムに表示
			1:左から 2:右から 3:上から 4:下から
	interval: 画像表示時間を秒で指定（切替え中も含まれる）
	duration: 切替えの時間を秒で指定

【XMLの説明】
<?xml version="1.0" encoding="UTF-8"?>
<items>
	<item>
		<title>タイトル</title>
		<url>画像URL:相対パスの場合HTMLから/01.jpg</url>
	</item>
</items>
 ------------------------------------------------------------------------ */

var Slidein = Class.create();
Slidein.prototype = {

initialize: function(loc,option) {
	this.url = loc;
	this.props = {
		imageId : "image-container",
		effect : 0,
		interval : 3,
		duration : 0.7
	};
	for (var key in option) this.props[key] = option[key];

	this.myTimer = 0;
	this.idx = 0;
	this.itemCount = 0;
	this.prevEffect = 1;
	this.imageUrls = new Array();
	this.titleArray = new Array();
	this.baseDiv = $(this.props.imageId);
	
	if (this.url.items) this.loadJson();
	else this.loadXMLFile();
},
			
loadXMLFile: function () {
	new Ajax.Request(this.url, {
		method: "get", 
		onComplete: function (httpObj) { 
						this.displayData(httpObj); 
					}.bindAsEventListener(this)
		}
	);
},

displayData: function (httpObj) {
	var XML = httpObj.responseXML;
	var itemsTag = XML.getElementsByTagName("items");
	var items = itemsTag[0].getElementsByTagName("item");
	this.itemCount = items.length;
	for (var i = 0; i < this.itemCount; i++) {
		var nd = items[i].getElementsByTagName("url")[0];
		this.imageUrls[i] = nd.firstChild.nodeValue;
		nd = items[i].getElementsByTagName("title")[0];
		if (nd) this.titleArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
	}
	this.prepareAndPlay();
},

loadJson: function () {
	var items = this.url.items;
	this.itemCount = items.length;
	for (var i = 0; i < this.itemCount; i++) {
		this.imageUrls[i] = items[i].url;
		this.titleArray[i] = items[i].title ? items[i].title:'';
	}
	this.prepareAndPlay();
},
	
startSlide: function () {
	if (!this.myTimer) 
		this.myTimer = setInterval(function(e) {
			this.effectSlide(1);
		}.bindAsEventListener(this), this.props.interval*1000);
},

stopSlide: function () {
	if (this.myTimer) {
		clearInterval(this.myTimer);
		this.myTimer = 0;
	}
},

nextSlide: function () {
	this.stopSlide(); this.effectSlide(1); this.startSlide();
},

prevSlide: function () {
	this.stopSlide(); this.effectSlide(-1); this.startSlide();
},

effectSlide: function (direction) {
	var ef = this.props.effect;
	if (ef==0) {
		ef = Math.floor(Math.random()*4+1); //random(1..4)
		if (ef==this.prevEffect) ef = (ef % 4)+1;
		this.prevEffect = ef;
	}
	this.idx = this.idx + direction;
	if (this.idx == this.itemCount) this.idx = 0;
	else if (this.idx < 0) this.idx = this.itemCount - 1;
	this.slideIn(this.idx,ef);
},

slideIn: function (lbl,ef) {
	if ($("slitem-"+lbl))
		this.baseDiv.removeChild($("slitem-"+lbl));
	var imgObj = document.createElement('img');
	imgObj.id = "slitem-" + lbl;
	imgObj.style["position"] = "absolute";
	imgObj.style["display"] = "none";
	this.baseDiv.appendChild(imgObj);
	var cx=0, cy=0;
	switch (ef) {
	case 1://left
		cx = -1 * this.baseDiv.offsetWidth; cy = 0; break;
	case 2://right
		cx = this.baseDiv.offsetWidth; cy = 0; break;
	case 3://top
		cx = 0; cy = -1 * this.baseDiv.offsetHeight; break;
	case 4://bottom
		cx = 0; cy = this.baseDiv.offsetHeight;
	}
	imgObj.style.left = cx+"px";
	imgObj.style.top = cy+"px";
	imgObj.style["display"] = "block";
	imgObj.src = this.imageUrls[lbl];
	new Effect.Move(imgObj, { 
		transition:Effect.Transitions.sinoidal, 
		duration:this.props.duration, 
		x:0, y:0, mode:'absolute' 
	});
},
		
prepareAndPlay: function () {
	this.baseDiv.style.position = "relative";
	this.baseDiv.style.overflow = "hidden";
	//preload images
	for (var i=0; i < this.itemCount; i++) {	
		var img = new Image();
		if (i==0) {
			img.onload = function() { //autoplay
				this.slideIn(0, this.props.effect==0?1:this.props.effect);
				this.startSlide();				
			}.bindAsEventListener(this,img);
		}
		img.src = this.imageUrls[i];
	}
}

}//prototype